<template>
  <div class="eventMonitoringWrap" id="eventMonitoringWrap">
    <el-collapse-transition>
      <div class="informInfo informInfo2" v-if="showMassageInfo">
        <p>
          {{ massageInfo }}
        </p>
      </div>
    </el-collapse-transition>
    <div class="header">
      <el-row>
        <div class="title">
          <!--            <span>{{name}}<i class="taskType" :class="{'green':status==='进行中'}">{{status}}</i></span>-->
          <!--            首届“中德安普杯” 全国职业院校（高职组）业财税融合暨大数据管理会计应用能力行业赛-->
          <p class="titleName">
            {{ taskName
            }}<i class="taskType" :class="{ green: taskStatus === '进行中' }">{{
              taskStatus
            }}</i>
          </p>
          <p class="statement">本场比赛最终结果（得分及排名）不以此为准</p>
        </div>
      </el-row>
      <el-row class="colorList">
        <el-col>
          <p><span></span>一等奖</p>
          <p><span></span>二等奖</p>
          <p><span></span>三等奖</p>
          <p><span></span>其他</p>
          <p><span></span>做题数</p>
        </el-col>
      </el-row>
      <el-row
        class="statisticsWrap"
        :class="{ statisticsWrap2: !showStatisticsWrap }"
      >
        <!--          v-show="showStatisticsWrap"-->
        <el-col :span="3">
          <div>
            <p>
              <span>{{ StatisticsData.ShouldExamCount }}</span> 组
            </p>
            <p>应考团队</p>
          </div>
        </el-col>
        <el-col :span="3">
          <div>
            <p>
              <span>{{ StatisticsData.PracticalExamCount }}</span> 组
            </p>
            <p>实考团队</p>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <p>
              <span>{{ StatisticsData.GroupHighestScore }}</span> 分
            </p>
            <p>团队最高分</p>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <p>
              <span>{{ StatisticsData.GroupAverageScore }}</span> 分
            </p>
            <p>团队平均分</p>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <p>
              <span>{{ StatisticsData.GroupLowestScore }}</span> 分
            </p>
            <p>团队最低分</p>
          </div>
        </el-col>
        <el-col :span="3">
          <div>
            <p>
              <span>{{ StatisticsData.HasPaperGroupCount }}</span> 组
            </p>
            <p>已交卷团队</p>
          </div>
        </el-col>
        <el-col :span="3">
          <div>
            <p>
              <span>{{ StatisticsData.HasPaperPeopleCount }}</span> 人
            </p>
            <p>已交卷人数</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main">
      <div class="operationBox">
        <div class="left">
          <div v-for="(item, index) in butArr" :key="item.name" class="btnBox">
            <p
              @click="tabsChange(1, index, item)"
              class="btn"
              :class="{ active: tabs.tabsType1 == index }"
            >
              {{ item.name }}
            </p>
            <ul>
              <!--              v-show="tabsType1 == index"-->
              <li
                v-for="(btnItem, ind) in item.list"
                :key="btnItem"
                @click="tabsChange(2, index, item, btnItem)"
                :class="{ active: tabs.tabsType2 == btnItem }"
              >
                {{ btnItem }}
              </li>
            </ul>
          </div>
        </div>
        <div class="right" style="padding-top: 6px">
          <div>
            <p class="opera">
              <span @click="operaFn(1)" class="back"><i></i>返回</span>
              <span @click="operaFn(2)" class="refresh"><i></i>刷新</span>
              <span
                @click="operaFn(3)"
                v-show="tabs.tabsType1 == 2"
                class="download"
                ><i></i>下载</span
              >
              <span @click="operaFn(4)" class="showStatistics"
                ><i></i>统计数据</span
              >
              <el-popover
                v-show="tabs.tabsType1 != 2"
                placement="left"
                width="384"
                popper-class="eventMonitoringPopover"
                trigger="click"
              >
                <div class="tableWrap">
                  <el-table :data="gridData" style="width: 100%">
                    <el-table-column
                      width="100"
                      property="GroupName"
                      label="团队"
                    ></el-table-column>
                    <el-table-column
                      property="SchoolName"
                      label="院校"
                    ></el-table-column>
                  </el-table>
                </div>
                <span
                  v-show="tabs.tabsType1 != 2"
                  slot="reference"
                  class="nameList"
                  ><i></i>名单</span
                >
                <!--            <span  @click="operaFn(5)" class="nameList"><i></i>名单</span>-->
              </el-popover>
              <span
                v-show="tabs.tabsType1 != 2"
                @click="operaFn(6)"
                class="fullScreen"
                ><i></i>全屏</span
              >
            </p>
            <p class="updateTime">更新时间：{{ upDataDate }}</p>
          </div>
        </div>
      </div>

      <div class="chartBox" v-show="tabs.tabsType1 != 2">
        <div v-if="tabs.tabsType2 != '按岗位'">
          <!--          <div ref="myChart" class="myChart" v-for="(item) in Math.ceil(months.length / 10)" :key="item"></div>-->
          <div
            ref="myChart"
            class="myChart"
            v-for="item in Math.ceil(
              groupOutLetInfo.RankingDetailList.length / chartSize
            )"
            :key="item"
          ></div>
        </div>
        <div v-if="tabs.tabsType2 == '按岗位'">
          <!--          <div ref="myChart2" class="myChart2" v-for="(item) in 8" :key="`a${item}`"></div>-->
          <div
            ref="myChart2"
            class="myChart2"
            v-for="(item, ind) in groupOutLetInfo2"
            :key="item.PositionName"
          ></div>
        </div>
      </div>
      <div v-if="tabs.tabsType1 == 2" class="tabBox">
        <el-table :data="tableData" border stripe style="width: 90%">
          <el-table-column prop="GroupNo" sortable label="团队名称">
            <template slot-scope="scope">
              <p class="item">团队{{ scope.row.GroupNo }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="SchoolName" width="350" label="所属院校">
          </el-table-column>
          <el-table-column prop="AdviserName" width="250" label="指导老师">
          </el-table-column>
          <el-table-column prop="TotalQuestionCount" label="总做题数">
          </el-table-column>
          <el-table-column prop="TotalScore" sortable label="总成绩(分)">
          </el-table-column>
          <el-table-column prop="CurrentRanking" sortable label="当前名次">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
// import html2canvas from "html2canvas/dist/types";
import { mapGetters } from "vuex";

export default {
  name: "eventMonitoring",
  data() {
    return {
      taskName: "",
      taskStatus: "",
      groupOutLetInfo: {
        RankingDetailList: [],
      }, //普通柱状图数据，
      groupOutLetInfo2: [], //按岗位柱状图数据，
      upDataDate: "", //更新时间
      butArr: [
        {
          name: "全部团队",
          list: [],
        },
        {
          name: "按出线",
          list: ["按总分", "按岗位", "按团队"],
        },

        {
          name: "数据视图",
          list: [],
        },
      ],
      tabs: {
        tabsType1: 0, //外层切换
        tabsType2: "", //内层切换
      },
      showStatisticsWrap: true, //是否显示统计
      StatisticsData: {}, //统计数据
      time: null, //定时器
      dwArr: [], //名次
      // months:[],//团队
      // zgArr:[],//总成绩
      // jeArr:[],//总做题量
      zgArr: [
        100.0,
        40.4444,
        180.1234,
        170.1234,
        140.1234,
        40.1234,
        199,
        50.3698,
        15.9999,
        66.1234,
        99.1234,
        33.1234,
        44.1234,
        123.1234,
        145.1234,
        167.1234,
        155.1234,
        178.1234,
        123.1234,
        156.1234,
        167.1234,
        148.1234,
        129.1234,
        46.1234,
        78.1234,
        96.1234,
        98.1234,
        59.1234,
        77.1234,
        86.1234,
        95.1234,
        84.1234,
        63.1234,
        66.1234,
        74.1234,
        66.1234,
        100.1234,
        122.1234,
      ], //总成绩
      jeArr: [
        22,
        60,
        70,
        23,
        45,
        67,
        72,
        34,
        57,
        21,
        19,
        10,
        68,
        36,
        57,
        68,
        36,
        41,
        61,
        71,
        43,
        65,
        39,
        59,
        69,
        35,
        61,
        50,
        60,
        30,
        38,
        11,
        9,
        59,
        29,
        54,
        48,
        29,
      ], //总做题量
      months: [
        "团队1",
        "团队2",
        "团队3",
        "团队4",
        "团队5",
        "团队6",
        "团队7",
        "团队8",
        "团队9",
        "团队10",
        "团队11",
        "团队12",
        "团队13",
        "团队14",
        "团队15",
        "团队16",
        "团队17",
        "团队18",
        "团队19",
        "团队20",
        "团队21",
        "团队22",
        "团队23",
        "团队24",
        "团队25",
        "团队26",
        "团队27",
        "团队28",
        "团队29",
        "团队30",
        "团队31",
        "团队32",
        "团队33",
        "团队34",
        "团队35",
        "团队36",
        "团队37",
        "团队38",
      ],
      end: 100, //X轴滑条结束百分比
      list: [], //表格数据
      tableData: [],
      gridData: [], //名单
      massageInfo: "", //推送的公告消息
      showMassageInfo: false, //显示推送消息
      chartSize: 35, //柱状图每个所显示的条目数带做题数
      chartSize2: 25, //柱状图每个所显示的条目数不带做题数
    };
  },
  created() {
    //获取团队院校列表
    this.getgroupschoollistFn();
    this.init();
  },
  mounted() {
    window.addEventListener("resize", this.resize);
    //加定时器
    if (this.time) {
      clearInterval(this.time);
    } else {
      this.time = setInterval(() => {
        this.init();
        // this.drawLine();
      }, 15000);
    }
  },
  beforeDestroy() {
    clearInterval(this.time);
  },
  methods: {
    //请求数据
    init() {
      if (this.showStatisticsWrap) {
        //获取团队统计信息
        this.getgroupstatisticsinfoFn();
      }
      //按出线（按团队，按总分,按岗位）
      this.getTabsDataFn();
    },
    //根据不一样的tab掉不同的接口
    getTabsDataFn() {
      if (this.tabs.tabsType1 === 1) {
        //按出线
        if (this.tabs.tabsType2 == "按总分") {
          this.getgroupoutletinfoFn(0);
        } else if (this.tabs.tabsType2 == "按团队") {
          this.getgroupoutletinfoFn(1);
        } else if (this.tabs.tabsType2 == "按岗位") {
          this.getpositionoutletgroupinfoFn();
        }
      } else if (this.tabs.tabsType1 === 0) {
        //全部团队
        this.getallgroupscoreinfoFn();
      } else if (this.tabs.tabsType1 == 2) {
        //按数据
        this.getallgroupresultrankinfoFn();
      }
    },
    //重新绘制柱状图
    upDateEchartsFn() {
      if (this.tabs.tabsType1 != 2) {
        // let option = {};
        if (this.tabs.tabsType1 === 1 && this.tabs.tabsType2 == "按岗位") {
          let myChart = document.getElementsByClassName("myChart2");
          for (var i = 0; i < myChart.length; i++) {
            myChart[i].style.width =
              document.getElementById("eventMonitoringWrap").offsetWidth -
              40 +
              "px";
            // console.log(myChart[i]);
            this.drawLine2(myChart[i], i, this.groupOutLetInfo2[i]);
          }
        } else {
          let myChart = document.getElementsByClassName("myChart");
          for (var i = 0; i < myChart.length; i++) {
            myChart[i].style.width =
              document.getElementById("eventMonitoringWrap").offsetWidth -
              40 +
              "px";
            this.drawLine(myChart[i], i, this.chartSize);
          }
        }
      }
    },
    // 获取团队院校列表
    getgroupschoollistFn() {
      let params = {
        taskId: this.userInfo.TaskId,
      };
      this.$api.competitionReportService
        .getgroupschoollist(params)
        .then((res) => {
          // console.log(res,'获取团队院校列表');
          if (res.Code == 200) {
            this.gridData = res.Data;
          }
        })
        .catch((err) => {
          console.log(err, "err");
        });
    },
    //获取团队统计信息
    getgroupstatisticsinfoFn() {
      let params = {
        taskId: this.userInfo.TaskId,
      };
      this.$api.competitionReportService
        .getgroupstatisticsinfo(params)
        .then((res) => {
          // console.log(res, '获取团队统计信息');
          if (res.Code == 200) {
            res.Data.GroupHighestScore = Number(
              res.Data.GroupHighestScore.toFixed(4)
            );
            res.Data.GroupAverageScore = Number(
              res.Data.GroupAverageScore.toFixed(4)
            );
            res.Data.GroupLowestScore = Number(
              res.Data.GroupLowestScore.toFixed(4)
            );
            this.StatisticsData = res.Data;
          }
        })
        .catch((err) => {
          console.log(err, "err");
        });
    },
    ////获取赛事团队出线信息
    getgroupoutletinfoFn(type) {
      let params = {
          taskId: this.userInfo.TaskId,
          sortType: type,
      };
      this.$api.competitionReportService
        .getgroupoutletinfo(params)
        .then((res) => {
          // console.log(res, '获取赛事团队出线信息');
          if (res.Code == 200) {
            this.taskName = res.Data.TaskName;
            this.taskStatus = res.Data.TaskStatus;
            this.upDataDate = res.Data.CurrentTime;
            this.groupOutLetInfo = res.Data;
            this.$nextTick(() => {
              this.upDateEchartsFn();
            });
          }
        })
        .catch((err) => {
          console.log(err, "err");
        });
    },
    //获取全部团队成绩信息
    getallgroupscoreinfoFn() {
      let params = {
        taskId: this.userInfo.TaskId,
      };
      this.$api.competitionReportService
        .getallgroupscoreinfo(params)
        .then((res) => {
          // console.log(res, '获取全部团队成绩信息');
          if (res.Code == 200) {
            this.taskName = res.Data.TaskName;
            this.taskStatus = res.Data.TaskStatus;
            this.upDataDate = res.Data.CurrentTime
            this.groupOutLetInfo = res.Data;
            this.$nextTick(() => {
              this.upDateEchartsFn();
            });
          }
        })
        .catch((err) => {
          console.log(err, "err");
        });
    },
    //获取赛事岗位出线团队信息
    getpositionoutletgroupinfoFn() {
      let params = {
        taskId: this.userInfo.TaskId,
      };
      this.$api.competitionReportService
        .getpositionoutletgroupinfo(params)
        .then((res) => {
          // console.log(res, '获取赛事岗位出线团队信息');
          if (res.Code == 200) {
            this.taskName = res.Data.TaskName;
            this.taskStatus = res.Data.TaskStatus;
            this.upDataDate = res.Data.CurrentTime;
            this.groupOutLetInfo2 = res.Data.TaskPositionList;
            this.$nextTick(() => {
              this.upDateEchartsFn();
            });
          }
        })
        .catch((err) => {
          console.log(err, "err");
        });
    },
    //按数据
    getallgroupresultrankinfoFn() {
      let params = {
        taskId: this.userInfo.TaskId,
      };
      this.$api.competitionReportService
        .getallgroupresultrankinfo(params)
        .then((res) => {
          // console.log(res, '按数据');
          if (res.Code == 200) {
            this.taskName = res.Data.TaskName;
            this.taskStatus = res.Data.TaskStatus;
            this.upDataDate = res.Data.CurrentTime;
            res.Data.ResultDetailList.forEach((v) => {
              v.GroupName = "团队" + v.GroupNo;
            });
            this.tableData = res.Data.ResultDetailList;
          }
        })
        .catch((err) => {
          console.log(err, "err");
        });
    },
    resize() {
      if (this.tabs.tabsType1 != 2) {
        let myChart = [];
        if (this.tabs.tabsType1 === 1 && this.tabs.tabsType2 == "按岗位") {
          myChart = document.getElementsByClassName("myChart2");
        } else {
          myChart = document.getElementsByClassName("myChart");
        }
        for (var i = 0; i < myChart.length; i++) {
          myChart[i].style.width =
            document.getElementById("eventMonitoringWrap").offsetWidth -
            40 +
            "px";
          this.$echarts.init(myChart[i]).resize();
        }
      }
    },
    //切换柱状图和表格
    tabsChange(type, ind, val, val2) {
      if (type == 1) {
        //点击外层
        if (ind == 2 || ind === 0) {
          this.tabs.tabsType1 = ind;
          this.tabs.tabsType2 = "";
          this.butArr[1].name = "按出线";
        }
      } else {
        this.tabs.tabsType1 = ind;
        this.tabs.tabsType2 = val2;
        val.name = val2;
      }
      this.getTabsDataFn();
    },
    //操作
    operaFn(type) {
      //1 返回 2刷新 3下载 4显示关闭统计数据 5名单 6全屏
      switch (type) {
        case 1:
          this.$router.go(-1);
          break;
        case 2:
          this.init();
          break;
        case 3:
          // 个人观察只是截取可见范围以及以下的区域，所以先将滚动条置顶
          // document.documentElement.scrollTop = 0; // 其他
          // this.downloadResult(val.name);
          this.handleExport();
          break;
        case 4:
          this.showStatisticsWrap = !this.showStatisticsWrap;
          if (this.showStatisticsWrap) {
            this.getgroupstatisticsinfoFn();
          }
          break;
        case 5:
          // this.$router.go(-1);
          break;
        case 6:
          this.fullScreen();
          break;
        default:
          break;
      }
    },
    //下载
    handleExport() {
      //this.downloadLoading = true;
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/vendor/Export2Excel"); //引入文件,注意路径
        const tHeader = [
          "团队名称",
          "所属院校",
          "指导老师",
          "总成绩（分）",
          "总做题数（题）",
          "当前名次",
        ]; //将对应的属性名转换成中文
        const filterVal = [
          "GroupName",
          "SchoolName",
          "AdviserName",
          "TotalScore",
          "TotalQuestionCount",
          "CurrentRanking",
        ]; //table表格中对应的属性名
        const list = this.tableData; //替换成自己的数据
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, this.taskName);
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },

    dataURLToBlob(dataurl) {
      //ie 图片转格式
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    //canvas 画图
    downloadResult(name) {
      let canvasID = document.body;
      let a = document.createElement("a");
      html2canvas(canvasID).then((canvas) => {
        let dom = document.body.appendChild(canvas);
        dom.style.display = "none";
        a.style.display = "none";
        document.body.removeChild(dom);
        let blob = this.dataURLToBlob(dom.toDataURL("image/png"));
        a.setAttribute("href", URL.createObjectURL(blob));
        a.setAttribute("download", name + ".png");
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(blob);
        document.body.removeChild(a);
      });
    },
    //全屏
    fullScreen() {
      let el = document.documentElement;
      let rfs =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullscreen;
      if (
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement
      ) {
        if (document.cancelFullScreen) {
          document.cancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msCancelFullScreen) {
          document.msCancelFullScreen();
        }
      } else {
        if (typeof rfs != "undefined" && rfs) {
          rfs.call(el);
        }
      }
      return;
    },

    //格式化时间
    changeDate(date, link) {
      const d = new Date(date);
      let startTime =
        d.getFullYear() +
        link +
        (d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1) +
        link +
        (d.getDate() < 10 ? "0" + d.getDate() : d.getDate()) +
        " " +
        (d.getHours() < 10 ? "0" + d.getHours() : d.getHours()) +
        ":" +
        (d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes()) +
        ":" +
        (d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds());
      return startTime;
    },

    maxCommon(m, n) {
      //辗转相除法 求最大公约数
      var u = +m,
        v = +n,
        t = v;
      while (v != 0) {
        t = u % v;
        u = v;
        v = t;
      }
      return u;
    },
    //柱状图,带做题数量
    drawLine(dom, index, chartSize) {
      //更新时间
      // console.log(a);
      // let date = new Date();
      // this.date = this.changeDate(date, '.')
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(dom);
      // 绘制图表
      // let that = this
      myChart.setOption({
        // color: this.colors,
        // title: {
        //     text: '投融资管理',
        //   textStyle:{
        //       color: '#fff',
        //     fontWeight: 600,
        //     fontSize: 24
        //   },
        //   top: 10,
        //   show:false
        // },
        grid: {
          top: 70,
          left: 60,
          right: 60,
        },
        tooltip: {
          trigger: "axis",
          // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          //     type: 'cross'    // 十字线显示
          // }
        },
        // legend: {//图例
        //     itemWidth: 16,
        //     itemHeight: 16,
        //     itemGap: 48,
        //     top: 20,
        //     textStyle: {
        //         color: 'rgba(255,255,255,1)'
        //     },
        //     data: ['总分', '做题数'],
        // },
        xAxis: [
          {
            axisLabel: {
              //X轴标签样式
              interval: 0,
              rotate: 45,
              fontWeight: 500,
              fontFamily: "PingFangSC-Medium,PingFangSC",
              color: "rgba(179,179,179,1)",
              margin: 23,
            },

            axisTick: {
              //是否显示分割刻度
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(153,153,153,1)", //X轴线颜色
              },
            },
            position: "bottom",
            // data: this.months.filter((v, ind) => {
            //   if (ind >= (index * 10) && ind < ((index + 1) * 10)) {
            //     return v
            //   }
            // })//X轴显示的标签数据
            data: this.groupOutLetInfo.RankingDetailList.filter((v, ind) => {
              if (ind >= index * chartSize && ind < (index + 1) * chartSize) {
                return v;
              }
            }).map((val) => {
              // console.log(val);
              return `团队${val.GroupNo}`;
            }), //X轴显示的标签数据
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "总分",
            nameTextStyle: {
              //样式
              interval: 0,
              fontWeight: 500,
              fontFamily: "PingFangSC-Medium,PingFangSC",
              color: "rgba(179,179,179,1)",
              margin: 15,
              padding: [0, 50, 10, 0],
            },
            min: 0,
            max: this.groupOutLetInfo.TotalScore,
            interval: Math.ceil(this.groupOutLetInfo.TotalScore / 2),
            // interval: this.totalScore/8,
            // interval: this.m,
            splitLine: {
              //网格线
              lineStyle: {
                // type: 'dashed',  //设置网格线类型 dotted：虚线   solid:实线
                type: "solid", //设置网格线类型 dotted：虚线   solid:实线
                color: "#999999",
              },
              show: true, //隐藏或显示
            },

            axisLabel: {
              //y轴标签样式
              interval: 0,
              fontWeight: 500,
              fontFamily: "PingFangSC-Medium,PingFangSC",
              color: "rgba(179,179,179,1)",
              margin: 15,
              fontSize: 20,
            },
            axisTick: {
              //是否显示分割刻度
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(153,153,153,1)", //Y轴线颜色
              },
            },
          },
          {
            type: "value",
            name: "做题数",
            nameLocation: "end", //位置
            show: true,
            splitLine: {
              //网格线
              lineStyle: {
                type: "solid", //设置网格线类型 dotted：虚线   solid:实线
                color: "#999",
              },
              show: false, //隐藏或显示
            },

            nameTextStyle: {
              //样式
              interval: 0,
              fontWeight: 500,
              fontFamily: "PingFangSC-Medium,PingFangSC",
              color: "rgba(179,179,179,1)",
              margin: 15,
              padding: [0, 0, 10, 40],
            },
            min: 0,
            // max: this.groupOutLetInfo.TotalQuestionCount,//最大刻度
            // interval: Math.ceil(this.groupOutLetInfo.TotalQuestionCount / 2),//间隔
            max: 110, //最大刻度
            interval: 55, //间隔
            axisLabel: {
              //X轴标签样式
              interval: 0,
              fontWeight: 500,
              fontFamily: "PingFangSC-Medium,PingFangSC",
              color: "rgba(179,179,179,1)",
              margin: 15,
              fontSize: 20,
            },
            axisTick: {
              //是否显示分割刻度
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(153,153,153,1)", //Y轴线颜色
              },
            },
          },
        ],
        series: [
          {
            name: "总分",
            type: "bar",
            barWidth: "10",
            barGap: "50%" /*多个并排柱子设置柱子之间的间距*/,
            barCategoryGap: "100%" /*多个并排柱子设置柱子之间的间距*/,
            itemStyle: {
              normal: {
                color: (val) => {
                  // awardLevel 0:没得奖 1:一等奖 2:二等奖 3:三等奖
                  let arr = this.groupOutLetInfo.RankingDetailList.filter(
                    (v, ind) => {
                      if (
                        ind >= index * chartSize &&
                        ind < (index + 1) * chartSize
                      ) {
                        return v;
                      }
                    }
                  );
                  if (arr[val.dataIndex].AwardLevel == 1) {
                    return new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(255,153,68,1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(252,96,118,1)",
                        },
                      ]
                    );
                  } else if (arr[val.dataIndex].AwardLevel == 2) {
                    return new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(33,149,255,1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(46,109,229,1)",
                        },
                      ]
                    );
                  } else if (arr[val.dataIndex].AwardLevel == 3) {
                    return new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(255,219,189,1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(252,166,96,1)",
                        },
                      ]
                    );
                  } else {
                    return new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "#FFF7E7",
                        },
                        {
                          offset: 1,
                          color: "#FFDBBD",
                        },
                      ]
                    );
                  }
                },
              },
              // color:'linear-gradient(180deg,rgba(255,153,68,1) 0%,rgba(252,96,118,1) 100%)'
            },
            label: {
              normal: {
                show: true,
                position: "top",
                // distance:20,
                color: "rgba(255,255,255,1)",
                fontSize: 12,
                rotate: -75,
                offset: [-13, -25],
              },
            },
            markPoint: {
              show: false,
              // symbolSize: 1,
              symbolOffset: ["0", "-80%"],
            },

            // data: this.zgArr.filter((v, ind) => {
            //   if (ind >= (index * 10) && ind < ((index + 1) * 10)) {
            //     return v
            //   }
            // })
            data: this.groupOutLetInfo.RankingDetailList.filter((v, ind) => {
              if (ind >= index * chartSize && ind < (index + 1) * chartSize) {
                return v;
              }
            }).map((val) => {
              return Number(val.TotalScore.toFixed(4));
            }),
          },
          {
            name: "做题数",
            type: "bar",
            barWidth: "10",
            // barGap: '40%',/*多个并排柱子设置柱子之间的间距*/
            // barCategoryGap: '100%',/*多个并排柱子设置柱子之间的间距*/
            yAxisIndex: 1, //选用哪个Y轴
            itemStyle: {
              normal: {
                // color: '#2588F7',
                //颜色渐变
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(33,149,255,.2)",
                  },
                  {
                    offset: 1,
                    color: "rgba(46,109,229,.2)",
                  },
                ]),
              },
            },
            label: {
              normal: {
                show: true,
                position: "top",
                distance: 10,
                color: "rgba(255,255,255,1)",
                fontSize: 12,
              },
            },

            // data: this.jeArr.filter((v, ind) => {
            //   if (ind >= (index * 10) && ind < ((index + 1) * 10)) {
            //     return v
            //   }
            // })
            data: this.groupOutLetInfo.RankingDetailList.filter((v, ind) => {
              if (ind >= index * chartSize && ind < (index + 1) * chartSize) {
                return v;
              }
            }).map((v) => {
              return v.TotalQuestionCount;
            }),
          },
        ],
        dataZoom: [
          // {//滑条
          //     type: 'slider',
          //     show: true,
          //     start: 0,
          //     // end: this.end,
          //     end: 100,
          //     handleSize: 1,
          //     handleStyle:{
          //         // color:'red'
          //     },
          //     textStyle:{
          //         show:false,
          //         color:'rgba(255,255,255,0)'
          //     },
          //     height:10,
          //     bottom:50
          //
          // },
          // {//滚轮
          //     type: 'inside',
          //     start: 0,
          //     end: this.end
          // },
          /* {
                 type: 'slider',
                 show: true,
                 yAxisIndex: 0,
                 filterMode: 'empty',
                 width: 12,
                 height: '70%',
                 handleSize: 8,
                 showDataShadow: false,
                 left: '93%'
             }*/
        ],
      });
    },
    //柱状图,按岗位划分
    drawLine2(dom, index, val) {
      // console.log(val);
      //更新时间
      // console.log(dom, '********');
      // let date = new Date();
      // this.date = this.changeDate(date, '.')
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(dom);
      // 绘制图表
      let that = this;
      myChart.setOption({
        // color: this.colors,
        title: {
          // text: '投融资管理',
          text: val.PositionName,
          textStyle: {
            color: "#fff",
            fontWeight: 600,
            fontSize: 24,
          },
          top: 10,
          show: true,
        },
        grid: {
          top: 100,
          left: 60,
          right: 60,
        },
        tooltip: {
          trigger: "axis",
          // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          //     type: 'cross'    // 十字线显示
          // }
        },
        // legend: {//图例
        //     itemWidth: 16,
        //     itemHeight: 16,
        //     itemGap: 48,
        //     top: 20,
        //     textStyle: {
        //         color: 'rgba(255,255,255,1)'
        //     },
        //     data: ['总分', '做题数'],
        // },
        xAxis: [
          {
            axisLabel: {
              //X轴标签样式
              interval: 0,
              rotate: 45,
              fontWeight: 500,
              fontFamily: "PingFangSC-Medium,PingFangSC",
              color: "rgba(179,179,179,1)",
              margin: 23,
            },

            axisTick: {
              //是否显示分割刻度
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(153,153,153,1)", //X轴线颜色
              },
            },
            position: "bottom",
            // data: this.months,
            data: val.OutletGroupList.map((v) => {
              return `团队${v.GroupNo}`;
            }), //X轴显示的标签数据
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "总分",
            nameTextStyle: {
              //样式
              interval: 0,
              fontWeight: 500,
              fontFamily: "PingFangSC-Medium,PingFangSC",
              color: "rgba(179,179,179,1)",
              margin: 15,
              padding: [0, 30, 10, 0],
            },
            min: 0,
            max: val.TotalScore,
            interval: Math.ceil(val.TotalScore / 2),
            // interval: this.totalScore/8,
            // interval: this.m,
            splitLine: {
              //网格线
              lineStyle: {
                // type: 'dashed',  //设置网格线类型 dotted：虚线   solid:实线
                type: "solid", //设置网格线类型 dotted：虚线   solid:实线
                color: "#999999",
              },
              show: true, //隐藏或显示
            },

            axisLabel: {
              //y轴标签样式
              interval: 0,
              fontWeight: 500,
              fontFamily: "PingFangSC-Medium,PingFangSC",
              color: "rgba(179,179,179,1)",
              margin: 15,
              fontSize: 20,
            },
            axisTick: {
              //是否显示分割刻度
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(153,153,153,1)", //Y轴线颜色
              },
            },
          },
        ],
        series: [
          {
            name: "总分",
            type: "bar",
            barWidth: "10",
            barGap: "50%" /*多个并排柱子设置柱子之间的间距*/,
            barCategoryGap: "100%" /*多个并排柱子设置柱子之间的间距*/,
            itemStyle: {
              normal: {
                color: (data) => {
                  // awardLevel
                  let arr = val.OutletGroupList.filter((v) => {
                    return v;
                  });

                  if (arr[data.dataIndex].AwardLevel == 1) {
                    return new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(255,153,68,1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(252,96,118,1)",
                        },
                      ]
                    );
                  } else if (arr[data.dataIndex].AwardLevel == 2) {
                    return new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(33,149,255,1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(46,109,229,1)",
                        },
                      ]
                    );
                  } else if (arr[data.dataIndex].AwardLevel == 3) {
                    return new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(255,219,189,1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(252,166,96,1)",
                        },
                      ]
                    );
                  } else {
                    return new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "#FFF7E7",
                        },
                        {
                          offset: 1,
                          color: "#FFDBBD",
                        },
                      ]
                    );
                  }
                },
              },
              // color:'linear-gradient(180deg,rgba(255,153,68,1) 0%,rgba(252,96,118,1) 100%)'
            },
            label: {
              normal: {
                show: true,
                position: "top",
                // distance:20,
                color: "rgba(255,255,255,1)",
                fontSize: 12,
                // rotate: -75,
                // offset: [-13, -25]
              },
            },
            markPoint: {
              show: false,
              // symbolSize: 1,
              symbolOffset: ["0", "-80%"],
            },

            // data: this.zgArr,
            data: val.OutletGroupList.map((v) => {
              return Number(v.TotalScore.toFixed(4));
            }), //y轴显示的标签数据
          },
        ],
        dataZoom: [
          {
            //滑条
            type: "slider",
            show: val.OutletGroupList.length < this.chartSize2 ? false : true,
            start: 0,
            // end: this.end,
            end:
              val.OutletGroupList.length < this.chartSize2
                ? 100
                : ((this.chartSize2 - 1) / val.OutletGroupList.length).toFixed(
                    2
                  ) * 100,
            handleSize: 1,
            handleStyle: {
              // color:'red'
            },
            textStyle: {
              show: false,
              color: "rgba(255,255,255,0)",
            },
            height: 10,
            bottom: 50,
          },
          // {//滚轮
          //     type: 'inside',
          //     start: 0,
          //     end: 10
          // },
          /* {
                 type: 'slider',
                 show: true,
                 yAxisIndex: 0,
                 filterMode: 'empty',
                 width: 12,
                 height: '70%',
                 handleSize: 8,
                 showDataShadow: false,
                 left: '93%'
             }*/
        ],
      });
    },
  },
  computed: {
    ...mapGetters({
      userInfo: ["userInfo"],
      msgList: ["onGetCurrentChatObjMsg"], //接收到的信息列表
    }),
  },
  watch: {
    msgList: {
      handler(val) {
        // console.log(val,789879);
        let objectData = Object.values(val).pop();
        this.massageInfo = JSON.parse(objectData.msg).content.msg;
        this.showMassageInfo = true;
        setTimeout(() => {
          this.showMassageInfo = false;
        }, 180000);
      },
    },
  },
};
</script>

<style lang='less'>
.eventMonitoringWrap {
  width: 100%;
  min-height: 100vh;
  min-width: 1240px;
  background: #171a2b;
  position: relative;
  padding-top: 40px;
  box-sizing: border-box;
  padding-bottom: 30px;

  p {
    margin-bottom: 0;
  }

  .informInfo {
    position: fixed;
    top: 0;
    z-index: 10;
    min-height: 42px;
    box-sizing: border-box;
    padding: 10px 0;
    width: 100%;
    text-align: center;

    &.informInfo2 {
      background: rgba(255, 246, 234, 0.9);
      line-height: 26px;
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 59, 25, 1);

      p {
        display: inline-block;
        max-width: 900px;
        text-align: left;
        /*word-wrap: break-word !important;*/
        word-break: break-all;
      }
    }
  }

  .header {
    height: unset !important;
    text-align: center;

    .title {
      display: inline-block;
      font-family: PingFangSC-Medium, PingFangSC;
      text-align: center;
      /*min-width: 800px;*/
      /*margin: 0 auto;*/
      max-width: 500px;
      /*min-width: 300px;*/
      float: unset;

      .statement {
        color: rgba(122, 122, 122, 1);
        font-size: 12px;
        line-height: 17px;
        margin-top: 10px;
      }

      .titleName {
        font-size: 24px;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        line-height: 33px;
        vertical-align: middle;
        position: relative;
        text-indent: 3px;

        .taskType {
          font-style: normal;
          display: inline-block;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: -64px;
          width: 56px;
          font-size: 14px;
          line-height: 22px;
          text-align: center;
          background: rgb(136, 148, 168);
          color: rgba(255, 255, 255, 1);
          /*margin-left: 8px;*/
          border-radius: 2px;
          /*margin-left: 6px;*/
          /*margin-bottom: 4px;*/
          /*vertical-align: middle;*/

          &.green {
            background: rgba(39, 193, 39, 1);
          }
        }
      }
    }

    .colorList {
      margin: 17px 0 35px;

      .el-col {
        text-align: center;
        display: flex;
        justify-content: center;

        p {
          margin-right: 40px;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          display: flex;
          align-items: center;

          &:last-of-type {
            margin-right: 0;
          }

          &:nth-of-type(1) {
            span {
              background: linear-gradient(
                180deg,
                rgba(255, 153, 68, 1) 0%,
                rgba(252, 96, 118, 1) 100%
              );
            }
          }

          &:nth-of-type(2) {
            span {
              background: linear-gradient(
                180deg,
                rgba(33, 149, 255, 1) 0%,
                rgba(46, 109, 229, 1) 100%
              );
            }
          }

          &:nth-of-type(3) {
            span {
              background: linear-gradient(
                180deg,
                rgba(255, 219, 189, 1) 0%,
                rgba(252, 166, 96, 1) 100%
              );
            }
          }

          &:nth-of-type(4) {
            span {
              background: linear-gradient(180deg, #fff7e7 0%, #ffdbbd 100%);
            }
          }

          &:nth-of-type(5) {
            span {
              background: linear-gradient(
                180deg,
                rgba(33, 149, 255, 0.2) 0%,
                rgba(46, 109, 229, 0.2) 100%
              );
            }
          }

          span {
            margin-right: 10px;
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 4px;
          }
        }
      }
    }

    .statisticsWrap {
      width: 90%;
      min-width: 1230px;
      height: 135px;
      margin: 0 auto 28px;
      background: #202135;
      box-sizing: border-box;
      transition: all 0.3s;
      overflow: hidden;

      &.statisticsWrap2 {
        height: 0;
        margin-bottom: 0;
      }

      .el-col {
        height: 100%;
        display: flex;
        padding: 7px 0;
        /*flex-direction:column;*/
        align-items: center;

        &:last-of-type {
          div {
            border-right: none;
          }
        }

        div {
          border-right: 1px solid rgba(23, 26, 43, 1);
          width: 100%;

          p {
            width: 100%;
            text-align: center;

            &:nth-of-type(1) {
              font-size: 12px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: rgba(252, 79, 90, 1);

              span {
                font-size: 24px;
              }
            }

            &:nth-of-type(2) {
              font-size: 14px;
              font-family: PingFangHK-Regular, PingFangHK;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.3);
              margin-top: 7px;
            }
          }
        }
      }
    }
  }

  .main {
    position: relative;
    height: auto;

    .operationBox {
      height: 130px;
      width: 90%;
      margin: 0 auto;
      z-index: 999;
      display: flex;
      justify-content: space-between;

      .left {
        .btnBox {
          margin-right: 10px;
          display: inline-block;
          vertical-align: top;

          &:hover {
            .btn {
              color: rgba(255, 255, 255, 1);
              background: rgba(38, 138, 240, 1);
            }

            ul {
              display: block !important;
            }
          }

          .btn {
            height: 32px;
            width: 88px;
            line-height: 32px;
            text-align: center;
            background: none;
            border-radius: 2px;
            border: 1px solid rgba(38, 138, 240, 1);
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFangSC;
            font-weight: 500;
            color: rgba(38, 138, 240, 1);
            cursor: pointer;

            /*&:hover {*/
            /*  color: rgba(255, 255, 255, 1);*/
            /*  background: rgba(38, 138, 240, 1);*/
            /*}*/

            &.active {
              color: rgba(255, 255, 255, 1);
              background: rgba(38, 138, 240, 1);
            }
          }

          ul {
            display: none;

            li {
              width: 88px;
              height: 31px;
              line-height: 30px;
              text-align: center;
              border: 1px solid rgba(38, 138, 240, 0.1);
              border-top: none;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
              cursor: pointer;

              &.active,
              &:hover {
                background: #192944;
                color: rgba(38, 138, 240, 0.7);
              }
            }
          }
        }
      }

      .right {
        display: flex;
        align-items: center;

        .opera {
          display: flex;

          span {
            display: inline-block;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFangSC;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            margin-left: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;

            i {
              font-style: normal;
              display: inline-block;
              vertical-align: middle;
              margin-right: 5px;
            }
          }

          .back {
            i {
              width: 17px;
              height: 16px;
              background: url("/static/img/monitoring/return.png") no-repeat;
            }
          }

          .refresh {
            i {
              width: 20px;
              height: 18px;
              background: url("/static/img/monitoring/refresh.png") no-repeat;
            }
          }

          .download {
            i {
              width: 21px;
              height: 16px;
              background: url("/static/img/monitoring/downLoad.png") no-repeat;
            }
          }

          .showStatistics {
            i {
              width: 17px;
              height: 17px;
              background: url("/static/img/monitoring/showStatistics.png")
                no-repeat;
            }
          }

          .nameList {
            margin-left: 0;

            i {
              width: 16px;
              height: 15px;
              background: url("/static/img/monitoring/nameList.png") no-repeat;
            }
          }

          .fullScreen {
            color: rgba(38, 138, 240, 1);

            i {
              width: 15px;
              height: 15px;
              background: url("/static/img/monitoring/fullscreen.png") no-repeat;
            }
          }
        }

        .updateTime {
          font-size: 12px;
          font-family: PingFangSC-Medium, PingFangSC;
          font-weight: 500;
          color: rgba(255, 153, 68, 1);
          line-height: 17px;
          padding-left: 24px;
          margin-top: 10px;
          text-align: right;
        }
      }
    }
  }

  .myChart,
  .myChart2 {
    width: 100%;
    height: 300px;
    margin: 0 auto 20px;
  }

  .tabBox {
    width: 85%;
    min-width: 1200px;
    margin: 0 auto;

    .cell {
      text-align: center;
    }

    .el-table {
      border: 1px solid rgba(54, 54, 54, 0.9);
      background: #171a2b;
      margin: 0 auto;

      &::before,
      &::after {
        background-color: rgba(54, 54, 54, 0.9);
      }

      thead {
        th {
          background: rgba(24, 46, 79, 1);
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: rgba(0, 176, 255, 0.8);
          border-right: none;
          border-bottom: 1px solid rgba(54, 54, 54, 0.8);
        }
      }

      tbody {
        tr {
          &.el-table__row--striped {
            td {
              background: #272938 !important;
            }
          }
        }

        td {
          background: #212332 !important;
          color: rgba(255, 255, 255, 0.7) !important;
          border-right: 1px solid rgba(54, 54, 54, 0.8);
          border-bottom: 1px solid rgba(54, 54, 54, 0.8);
        }
      }
    }
  }
}

.eventMonitoringPopover {
  height: 70vh;
  /*max-height: 70vh;*/
  padding: 0 !important;
  top: 150px !important;

  .popper__arrow {
    top: 233px !important;
  }

  .tableWrap {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 18px;

    &::-webkit-scrollbar {
      width: 4px;
      background: rgba(255, 255, 255, 0);
    }

    &::-webkit-scrollbar-track {
      /*margin-right: 6px;*/
      /*right: 6px;*/
      background: rgba(255, 255, 255, 0);
    }

    &::-webkit-scrollbar-thumb {
      background: linear-gradient(
        90deg,
        rgba(238, 238, 238, 1) 0%,
        rgba(185, 185, 185, 1) 100%
      );
      cursor: pointer;
      border-radius: 3px;
    }

    .el-table {
      .cell {
        text-align: center;
      }

      thead {
        .cell {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #257cca;
        }
      }

      tbody {
        tr {
          td {
            padding: 7px 0;
            border-bottom: none;

            .cell {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(102, 102, 102, 0.8);
            }
          }
        }
      }
    }
  }
}
</style>
